<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡和动画</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        /* 离开过渡 */
        .test-leave{
            opacity:1;
        }
        .test-leave-active{
            transform:rotateX(45deg);
            transition:5s;
        }
        .test-leave-to{
            opacity:0;
        }
        /* 进入过渡 */
        .test-enter{
            opacity:0;
        }
        .test-enter-active{
            transform:translateX(100px);
            transition:all 5s;
        }
        .test-enter-to{
            opacity:1;
        }

        /* 动画 */
        .route-leave-active{
            animation:anima 5s linear;
        }

        .route-enter-active{
            animation:anima1 6s linear;
        }
        @keyframes anima{
            0%{
                transform:translateX(0px) scale(0);
            }
            100%{
                transform:translateX(100px) scale(2);
            }
        }
        @keyframes anima1{
            0%{
                transform:translateX(100px) scale(2);
            }
            100%{
                transform:translateX(0px) scale(1);
            }
        }
    </style>
</head>

<body>
    <!-- 
        基本知识：
            在vue中通过类名操作transition和animation，
            类名有六个
            v-enter  定义 进入过渡 开始状态
            v-enter-active  定义 进入过渡 生效时的状态
            v-enter-to  定义 进入过渡 的结束状态
            v-leave 定义 离开过渡 开始状态
            v-leave-active 定义 离开过渡 生效时状态
            v-leave-to 定义 离开过渡  结束状态
     -->
    <div class="box">

        <!-- 一、过渡 -->
        <transition name="test">
            <h1 v-show="flag">{{msg}}</h1>
        </transition>
       
        <!-- 二、动画 -->
        <transition name="route">
            <h1 v-show="flag">{{msg}}</h1>
        </transition>
        <button @click="flag=!flag">点击切换</button>

        <!-- 
            三、自定义动画名称 结合animate.css库 
            我们可以通过attribute来自定义过渡类名
            1、引入网上animate.css库；
            2、
        -->
        <transition enter-active-class="animate__animated animate__bounceInDown" leave-active-class="animate__animated animate__bounceIn">
            <h1 v-show="flag">{{msg}}</h1>
        </transition>
    </div>
    <script>
        const vm = new Vue({
            el: '.box',
            data: {
                flag:true,
                msg:'显示与隐藏！'
            }
        })
    </script>
</body>

</html>